<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <style type="text/css">
    	body,html{
    		height: 100%;
    		overflow: hidden;
    	}
    	*{
    		margin: 0;
    		padding: 0;
    	}
    	div{
    		box-sizing: border-box;
    	}
    	#main{
    		height: 100%;
    		font: 20px/1.66 "微软雅黑";
    	}
    	#run{
    		height: 20%;
    	}
    	.c3{
    		float: left;
    		border: 1px solid goldenrod;
    		width: 25%;
    		height: 16%;
    		line-height: 500%;
    		text-align: center;
    	}
    	.c6{
    		width: 50%;
    		height: 16%;
    		float: left;
    		border: 1px solid goldenrod;
    		text-align: center;
    		line-height: 500%;
    	}
    	.bt{
    		background-color: lemonchiffon;
    	}
    </style>
    <script type="text/javascript">
    	
   		document.addEventListener('plusready', function(){
   			//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
   			
   		});
   		
    </script>
</head>
<body>
	<div id="main">
		<div id="run"></div>
		<div class="c3">C</div>
		<div class="c3">+/-</div>
		<div class="c3">back</div>
		<div class="c3 bt">+</div>
		<div class="c3">7</div>
		<div class="c3">8</div>
		<div class="c3">9</div>
		<div class="c3 bt">-</div>
		<div class="c3">4</div>
		<div class="c3">5</div>
		<div class="c3">6</div>
		<div class="c3 bt">*</div>
		<div class="c3">1</div>
		<div class="c3">2</div>
		<div class="c3">3</div>
		<div class="c3 bt">/</div>
		<div class="c6">0</div>
		<div class="c3">.</div>
		<div class="c3">=</div>
	</div>
</body>
<script>
	var main = document.getElementById('main');
	var run = document.getElementById('run');
	main.onclick = function(ev){
		var ev = ev.target;
		if(ev.className.indexOf('c',0) != '0'){
			return;
		}
		
		if(ev.innerHTML == 'C'){
			run.innerHTML = '';
		}else if(ev.innerHTML == 'back'){
			run.innerHTML = run.innerHTML.substr(0, run.innerHTML.length - 1);
		}else if(ev.innerHTML == '='){
			run.innerHTML = eval(run.innerHTML);
		}else{
			run.innerHTML += ev.innerHTML;
		}
	}
</script>
</html>